<template>
  <a-flex justify="flex-end" gap="small">
    <a-button @click="loadGroup(props.model.id)"> {{ $t("104") }} </a-button>
    <a-button type="primary" @click="goNewVg">新建</a-button>
  </a-flex>
  <a-table :columns="colGroup" :data-source="lstGroup" size="small">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex == '_actions'">
        <a-button
          type="link"
          @click="goEditVg(record)"
          :icon="h(EditOutlined)"
        ></a-button>
        <a-button
          type="link"
          danger
          @click="removeVg(record)"
          :icon="h(DeleteOutlined)"
        ></a-button>
      </template>
    </template>
  </a-table>
  <a-modal
    v-model:open="state.popGroup"
    :footer="null"
    :title="$t('385')"
    width="720px"
  >
    <a-form
      :model="form"
      size="small"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-item label="访问者" v-if="state.editMode == 1">
        <a-select v-model:value="form.uIds" mode="multiple">
          <a-select-option
            v-for="u in appStore.otherUsers"
            :key="u.id"
            :value="u.id"
            >{{ u.name }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item label="访问者可写">
        <a-switch
          v-model:checked="form.writeAble"
          :disabled="state.editMode != 1"
        ></a-switch>
      </a-form-item>
      <a-form-item :label="$t('390')">
        <a-select v-model:value="form.vgt" :disabled="state.editMode != 1">
          <a-select-option
            v-for="item in appStore.aryVgt"
            :key="item.key"
            :value="item.key"
            >{{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('391')" v-if="form.vgt == 2">
        <a-input v-model:value="form.k" :disabled="state.editMode != 1" />
      </a-form-item>
      <a-form-item :label="$t('392')" v-if="form.vgt == 3">
        <a-input-password
          v-model:value="form.k"
          :disabled="state.editMode != 1"
        />
      </a-form-item>
      <a-form-item :label="$t('393')" v-if="form.vgt == 4">
        <a-input
          v-model:value="form.k"
          :disabled="state.editMode != 1"
        /><a-input v-model:value="form.c" :disabled="state.editMode != 1" />
      </a-form-item>
      <a-flex class="ToolBar" justify="space-between">
        <strong>额外的访问权限</strong>
      </a-flex>
      <VisitRightEditor ref="refVre"></VisitRightEditor>
      <a-flex class="ToolBar" justify="space-between">
        <strong>字段限制</strong>
      </a-flex>
      <ShareVisitLimitEditor
        ref="refSrf"
        :model="props.model"
      ></ShareVisitLimitEditor>
      <a-flex class="ToolBar" justify="space-between">
        <strong>记录限制</strong>
      </a-flex>
      <FveEditor
        ref="refFvee"
        :single="false"
        :readonly="state.editMode < 1"
        :fields="appStore.allModelFieldMap.get(props.model.id)"
        :inline="true"
      >
      </FveEditor>
      <a-flex>
        <a-button type="primary" @click="saveGroup">保存</a-button>
      </a-flex>
    </a-form>
  </a-modal>
</template>
<script setup>
import { h, nextTick, reactive, ref, watch } from "vue";
import CommonDefine from "@/component/CommonDefine";
import ShareVisitLimitEditor from "@/component/visit/ShareRuleOfFieldEditor.vue";
import { DeleteOutlined, EditOutlined } from "@ant-design/icons-vue";
import Utils from "@/component/Utils";
import { useI18n } from "vue-i18n";
import VisitRightEditor from "@/component/visit/ShareRuleOfModelEditor.vue";
import FveEditor from "@/component/query/FveEditor.vue";

const { t } = useI18n();
const props = defineProps({ model: Object });
const appStore = CommonDefine.appStore();
const form = reactive({});
const state = reactive({
  editMode: 0,
  popGroup: false,
});
const refVre = ref();
const refSrf = ref();
const refFvee = ref();
const colGroup = [
  {
    title: t("390"),
    dataIndex: "typeName",
  },
  {
    title: t("384"),
    dataIndex: "rangeName",
  },
  {
    title: t("394"),
    dataIndex: "userName",
  },
  {
    title: "",
    dataIndex: "_actions",
  },
];
const lstGroup = reactive([]);

const loadGroup = (modelId) => {
  state.editMode = 0;
  CommonDefine.clearArray(lstGroup);
  CommonDefine.apiGetArm(`/api/v1/share/vgs/${modelId}`, (d) => {
    d.forEach((x) => {
      x.key = x.id;
      x.typeName = appStore.aryVgt.find(
        (vgt) => vgt.key == x.groupType.T
      ).label;
      // console.log(x);
      x.userName = Utils.getUserName(x.uId);
      x.rangeName = Utils.describeShareRuleModel(x.ruleM);
      lstGroup.push(x);
    });
  });
};

const saveGroup = () => {
  form.modelId = props.model.id;
  form.rights = refVre.value.getRules();
  form.filters = refFvee.value.getFves();
  form.limits = refSrf.value.getRules();
  CommonDefine.apiPostArm("/api/v1/share/save-vg", form, (d) => {
    state.popGroup = false;
    loadGroup(form.modelId);
  });
};

const goEditVg = (vg) => {
  state.editMode = 2;
  state.popGroup = true;
  Object.assign(form, vg);
  form.vgt = vg.groupType.T;
  form.uIds = [vg.uId];
  if (vg.groupType.C) {
    let c = vg.groupType.C;
    if (c.c) {
      form.k = c.k;
      form.c = c.c;
    } else {
      form.k = c;
    }
  }
  nextTick(() => {
    refVre.value.setRules(vg.ruleM);
    refSrf.value.setRules(vg.ruleF);
    refFvee.value.setFves(vg.ruleFv);
  });
};

const removeVg = (vg) => {
  CommonDefine.apiPostArm("/api/v1/share/remove-vg", vg, (d) => {
    loadGroup(props.model.id);
  });
};

const goNewVg = () => {
  state.editMode = 1;
  state.popGroup = true;
  Object.assign(form, {});
  nextTick(() => {
    refVre.value.setRules([]);
    refSrf.value.setRules([]);
    refFvee.value.setFves([]);
  });
};

watch(
  () => props.model,
  (newValue) => {
    loadGroup(newValue.id);
  },
  {
    immediate: true,
  }
);
</script>
